<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebGL 2 Samples - geo_vertex_format</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - geo_vertex_format</div>
    <div id="description"> This sample demonstrates the use of different vertex formats. gl.HALF_FLOAT for normals and
        textures attribute.
    </div>
    <!-- WebGL 2 shaders -->
    <script id="vs" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 1
        #define TEXCOORD_LOCATION 2
        #define NORMAL_LOCATION 3
        #define COLOR_LOCATION 4

        precision highp float;
        precision highp int;

        uniform mat4 u_model;
        uniform mat4 u_modelInvTrans; // To properly transform normals to world space
        uniform mat4 u_viewProj;
        uniform vec3 u_lightPosition;

        layout(location = POSITION_LOCATION) in vec3 a_position;
        layout(location = TEXCOORD_LOCATION) in vec2 a_texCoord;
        layout(location = NORMAL_LOCATION) in vec3 a_normal;

        // Vertex shader outputs to fragment shader
        out vec2 v_texCoord;
        out vec3 v_normal;
        out vec3 v_lightDirection;

        void main()
        {
            // Compute position
            vec3 modelPosition = vec3(u_model * vec4(a_position, 1.0));
            v_lightDirection = vec3(u_viewProj * vec4(u_lightPosition - modelPosition, 1.0));
            gl_Position = u_viewProj * vec4(modelPosition, 1.0);

            v_normal = vec3(u_viewProj * u_modelInvTrans * vec4(a_normal, 0.0));

            // Pass through
            v_texCoord = a_texCoord;
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        #version 300 es
        #define POSITION_LOCATION 1
        #define TEXCOORD_LOCATION 2
        #define NORMAL_LOCATION 3
        #define COLOR_LOCATION 4
        #define LIGHT_DIRECTION_LOCATION 5

        precision highp float;
        precision highp int;

        uniform sampler2D s_tex2D;
        uniform float u_ambient;

        in vec2 v_texCoord;
        in vec3 v_normal;
        in vec3 v_lightDirection;
        out vec4 color;

        void main()
        {
            color = texture(s_tex2D, v_texCoord);

            float lightIntensity = dot(normalize(v_normal), normalize(v_lightDirection));
            lightIntensity = lightIntensity, 0.0, 1.0 + u_ambient;

            color = color * lightIntensity;
        }

    </script>

    <script type="module" src="./geo_vertex_format.ts">
    </script>
    <div id="highlightedLines" style="display: none">#L199-L274</div>
</body>

</html>